 
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import './Unauthorized.css';

function Unauthorized() {
  const navigate = useNavigate();
  const { state } = useAuth();

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <div className="unauthorized">
      <div className="unauthorized-container">
        <div className="unauthorized-content">
          <div className="error-icon">🚫</div>
          <h1>访问被拒绝</h1>
          <p>抱歉，您没有权限访问此页面。</p>
          
          {state.user && (
            <div className="user-info">
              <p>当前用户：{state.user.nickname}</p>
              <p>用户角色：{state.user.role === 'admin' ? '管理员' : '普通用户'}</p>
            </div>
          )}
          
          <div className="action-buttons">
            <button className="btn-primary" onClick={handleGoHome}>
              返回首页
            </button>
            <button className="btn-secondary" onClick={handleGoBack}>
              返回上页
            </button>
          </div>
          
          <div className="help-text">
            <p>如果您认为这是一个错误，请联系管理员。</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Unauthorized; 